<template>
  <div id="container">
    <el-header class="header">
      <div class="title">{{ title }}</div>
    </el-header>
    <el-main class="main">
      <div class="content">
        <el-button class="sale-message" type="primary" @click.stop="$router.push('/client/home')">售后留言</el-button>
        <el-button class="sale-register" type="warning" @click.stop="saleRegister">售后登记</el-button>
      </div>
    </el-main>
    <!-- 弹窗输入车辆ID或配件ID -->
    <el-dialog title="登记选择" :visible.sync="dialogFormVisible" v-if="dialogFormVisible" width="70vw">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="车辆ID或配件ID" prop="keyWord">
          <el-input v-model="form.keyWord" placeholder="请输入车辆ID或配件ID"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {isExist} from "@/api/client/register";

export default {
  name: 'ClientIndex',
  data() {
    return {
      title: '',
      dialogFormVisible: false,
      form: {},
      rules: {
        keyWord: [
          { required: true, message: "车辆ID或配件ID不能为空", trigger: "change" }
        ]
      }
    }
  },
  mounted() {
    this.title = process.env.VUE_APP_TITLE
  },
  methods: {
    saleRegister() {
      this.dialogFormVisible = true
    },
    reset() {
      this.form = {
        keyWord: null
      };
      this.resetForm("form");
    },
    //判断车辆ID或配件ID是否存在
    async submitForm() {
      await this.$refs["form"].validate(async valid => {
        if (valid) {
          let resp = await isExist(this.form.keyWord)
          if(resp.code === 200) {
            this.$modal.loading('正在查询订单信息...')
            //跳转到客户登记页面
            this.$router.push('/client/register?keyWord='+this.form.keyWord)
            this.$modal.closeLoading()
          }
        }
      })
    },
    cancel(){
      this.reset()
      this.dialogFormVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
#container {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .header {
    background: linear-gradient(to right, #f9a825, #f06292);
    color: white;
    text-align: center;
    height: 6vh !important;
    line-height: 6vh;

    .title {
      font-size: 2vh;
    }
  }

  .main {
    // flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .content {
    // height: 134px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .sale-message, .sale-register {
      width: 200px;
      height: 100px;
      font-size: 20px;
    }
  }
}
@media screen and (max-width: 1064px) {
  #container {
    .header {
      height: 100px !important;
      line-height: 100px;
    }
    .title {
      font-size: 16px;
    }
    .content {
      flex-direction: column;
    }
  }
  .sale-message,.sale-register {
    width: 60vw;
    line-height: 40px;
    font-size: 20px;
    margin-bottom: 20px;
    margin-left: 0;
  }
}
</style>
